import React from "react";
import { Modal, Form, Row, Col, Input, Radio, InputNumber, Select, Space } from "antd";
import { useModel } from "@umijs/max";
import { modalPropsType } from "@/constants/types";

const {Item} = Form;
const rules = [{required: true}];
const labelCol = {
  span: 7
}


const CouponUpdate = ({onCancel, onSubmit, visible, title, loading}: modalPropsType) => {
  const [form] = Form.useForm();
  const { getDict } = useModel('dictModel');
  const couponTypes = getDict('couponType');
  const countrys = getDict('country');
  const prdTypes = getDict('prdType');
  const deliveryMethods = getDict('deliveryMethod');
  const dports = getDict('dport');
  const units = getDict('unit');

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      ...res,
      productCodes: res?.productCodes?.join(','),
      countryName: countrys.find((v: any) => v.value === res?.country)?.label,
      productNames: res?.productCodes?.map((v: any) => prdTypes.find((s: any) => s.value === v)?.label).join(','),
      dportName: res?.dportCode ? dports.find((v: any) => v.value === res?.dportCode)?.label : undefined
    });
  }

  const handleTypeChange = (e: any) => {
    const val = e.target.value;
    if (String(val) === '1') {
      form.setFieldValue('unit', 'RMB');
    }
    if (String(val) === '2') {
      form.setFieldValue('unit', 'KGS');
    }
  }

  return (
    <Modal
      width="800px"
      title={title}
      open={visible}
      onCancel={onCancel}
      onOk={handleSubmit}
      maskClosable={false}
    >
      <Form form={form} className="modal-form-padding" labelCol={labelCol}>
        <Row gutter={30}>
          <Col span={12}>
            <Item rules={rules} name="name" label="优惠券名称">
              <Input />
            </Item>
          </Col>
          <Col span={12}>
            <Item rules={rules} name="type" label="类型">
              <Radio.Group onChange={handleTypeChange} options={couponTypes} />
            </Item>
          </Col>
          <Item noStyle shouldUpdate={(prev, next) => prev.type !== next.type}>
            {({getFieldValue}) => {
              const type = getFieldValue('type');
              if (String(type) === '1') {
                return (
                  <>
                    <Col span={12}>
                      <Item label='满额门槛' required>
                        <Space.Compact block>
                          <Item noStyle name="satisfiedAmount" rules={rules}>
                            <InputNumber style={{width: '170px'}} /> 
                          </Item>
                          <Item noStyle name="unit" rules={rules}>
                            <Select style={{width: '100px'}} disabled options={[{label: '元', value: 'RMB'}]} /> 
                          </Item>
                        </Space.Compact>              
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label='减扣金额' required>
                        <Space.Compact block>
                          <Item noStyle name="discountAmount" rules={rules}>
                            <InputNumber style={{width: '170px'}} /> 
                          </Item>
                          <Item noStyle name="unit" rules={rules}>
                            <Select style={{width: '100px'}} disabled options={[{label: '元', value: 'RMB'}]} /> 
                          </Item>
                        </Space.Compact>              
                      </Item>
                    </Col>
                  </>
                );
              }
              if (String(type) === '2') {
                return (
                  <>
                    <Col span={12}>
                      <Item label='减免金额/元' required>
                        <Space.Compact block>
                          <Item noStyle name="discountAmount" rules={rules}>
                            <InputNumber style={{width: '170px'}} /> 
                          </Item>
                          <Item noStyle name="unit" rules={rules}>
                            <Select style={{width: '100px'}} options={units} /> 
                          </Item>
                        </Space.Compact>              
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item label='减免货量上限' required>
                        <Space.Compact block>
                          <Item noStyle name="limitedAmount" rules={rules}>
                            <InputNumber style={{width: '170px'}} /> 
                          </Item>
                          <Item noStyle name="unit" rules={rules}>
                            <Select style={{width: '100px'}} options={units} /> 
                          </Item>
                        </Space.Compact>              
                      </Item>
                    </Col>
                  </>
                );
              }
            }}
          </Item>
          <Col span={12}>
            <Item rules={rules} name="country" label="国家">
              <Select options={countrys} allowClear />
            </Item>
          </Col>
          <Col span={12}>
            <Item rules={rules} name="productCodes" label="产品">
              <Select mode="multiple" options={prdTypes} allowClear />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="deliveryMethod" label="派送方式">
              <Select allowClear options={deliveryMethods} />
            </Item>
          </Col>
          <Col span={12}>
            <Item name="dportCode" label="目的港">
              <Select options={dports} allowClear />
            </Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}
export default CouponUpdate;